<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
    
	<head>
        <title>Cruce Peligroso Rock - Sitio web oficial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="description" content="Sitio web oficial de la banda de rock argentina Cruce Peligroso" />
        <meta name="keywords" content="cruce, peligroso, musica, albums, temas, discografia"/>
		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
		<link rel="stylesheet" href="css/skin.css" type="text/css" media="screen"/>
		<link href="css/jplayer.codrops.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="Scrollable-horizontal.css" type="text/css" />
		<link rel="stylesheet" href="Scrollable-buttons.css" type="text/css" />
		<script type="text/javascript" src="jquery/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="jquery/jquery.tools.min.js"></script>
		<script src="jquery/jquery-ui.min.js"></script>
		<script src="js/jquery.jcarousel.min.js" type="text/javascript"></script>
		<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
		<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('h2,h3,a',{
				textShadow: '1px 1px 1px #000000'
			});
		</script>
		
        <style>
			.reference{
				font-family:Arial;
				position:relative;
				width:100%;
				font-size:12px;
				text-transform:uppercase;
				text-align:center;
			}
			.reference a{
				color:#f9f9f9;
				text-decoration:none;
				margin-right:20px;
			}
			
		</style>
		<style>
 
			/* Estilo para la capa de imagen  */
			#image_wrap {
				
				/* Dimensiones */
				max-width: 400px;
				margin-left: auto;
				margin-right: auto;
				padding:15px 0;
 
				/* Centrado */
				text-align:center;
 
 				/* Otros estilos */
				background-color:#000000;
				border:1px solid #000000;
				outline:1px solid #000000;
				-moz-ouline-radius:4px;
			}
			
		</style>
		
		
    </head>
	
    <body>
    	<div id="header" align="center">
    		<img src="images/logo.png"></img>
    	</div>	
    	<div id="menu">
				<a class="menuItem" href="index.htm" onmouseout="" onmouseover="">Home</a>
				<a class="menuItem" href="musica.html" onmouseout="" onmouseover="">M&uacute;sica</a>
				<a class="menuItem" href="#" onmouseout="" onmouseover="">Fotos</a>
				<a class="menuItem" href="videos.html" onmouseout="" onmouseover="">Videos</a>
				<a class="menuItem" href="contacto.html" onmouseout="" onmouseover="">Contacto</a>
		</div>
		<div class="mp_wrapper">
			<div id="mp_content_wrapper" class="mp_content_wrapper2" style="height: 526px;">
				
				<!-- Slider --> 
				<div id="slider">
					
					<!-- Capa para la imagen más grande --> 
					<div id="image_wrap">
						<img src="fotos/1.jpg" width="400" height="300" /> 
					</div>
 
					<!-- Acción de imágenes previas --> 
					<table>
						<tr>
							<td>
								<a class="prev browse left"></a> 
							</td>
							<td>
								<!-- Elemento raíz para el slider --> 
								<div class="scrollable">
   
   								<!-- Elemento raíz para los items --> 
   								<div class="items"> 
   
      								<!-- 1-4 -->
      								<div>
         								<img src="fotos/1.jpg" class="active" />
         								<img src="fotos/2.jpg" />
         								<img src="fotos/3.jpg" />
         								<img src="fotos/4.jpg" />
      								</div>

									<!-- 5-8 -->
      								<div>
         								<img src="fotos/5.jpg" />
         								<img src="fotos/6.jpg" />
         								<img src="fotos/7.jpg" />
         								<img src="fotos/8.jpg" />
      								</div>
													
									<!-- 9-12 -->
      								<div>
         								<img src="fotos/9.jpg" />
         								<img src="fotos/10.jpg" />
         								<img src="fotos/11.jpg" />
         								<img src="fotos/12.jpg" />
      								</div>
													
									<!-- 13-16 -->
      								<div>
         								<img src="fotos/13.jpg" />
         								<img src="fotos/14.jpg" />
         								<img src="fotos/15.jpg" />
         								<img src="fotos/16.jpg" />
      								</div>
													
									<!-- 17-20 -->
      								<div>
         								<img src="fotos/17.jpg" />
         								<img src="fotos/18.jpg" />
         								<img src="fotos/19.jpg" />
         								<img src="fotos/20.jpg" />
      								</div>
													
									<!-- 21-24 -->
      								<div>
         								<img src="fotos/21.jpg" />
         								<img src="fotos/22.jpg" />
         								<img src="fotos/23.jpg" />
         								<img src="fotos/24.jpg" />
      								</div>
	      											
									<!-- 25-28 -->
      								<div>
         								<img src="fotos/25.jpg" />
         								<img src="fotos/26.jpg" />
         								<img src="fotos/27.jpg" />
         								<img src="fotos/28.jpg" />
      								</div>
													
									<!-- 29-32 -->
      								<div>
         								<img src="fotos/29.jpg" />
         								<img src="fotos/30.jpg" />
         								<img src="fotos/31.jpg" />
         								<img src="fotos/32.jpg" />
      								</div>
													
									<!-- 33-36 -->
      								<div>
         								<img src="fotos/33.jpg" />
         								<img src="fotos/34.jpg" />
         								<img src="fotos/35.jpg" />
         								<img src="fotos/36.jpg" />
      								</div>
													
									<!-- 37-40 -->
      								<div>
         								<img src="fotos/37.jpg" />
         								<img src="fotos/38.jpg" />
         								<img src="fotos/39.jpg" />
         								<img src="fotos/40.jpg" />
      								</div>
													
									<!-- 41-44 -->
      								<div>
         								<img src="fotos/41.jpg" />
         								<img src="fotos/42.jpg" />
         								<img src="fotos/43.jpg" />
         								<img src="fotos/44.jpg" />
      								</div>
													
									<!-- 45-48 -->
      								<div>
         								<img src="fotos/45.jpg" />
         								<img src="fotos/46.jpg" />
         								<img src="fotos/47.jpg" />
         								<img src="fotos/48.jpg" />
      								</div>
													
									<!-- 49-50 -->
      								<div>
         								<img src="fotos/49.jpg" />
         								<img src="fotos/50.jpg" />
         							</div>
													
   								</div>
							</div>
						</td>
						<td>
							<!-- Acción de imágenes siguientes --> 
							<a class="next browse right"></a>
						</td>
					</tr>
				</table>

				<script>
					slider();
				</script>

			</div>
				
		</div>

		<!-- "next page" action -->
		<a class="next browse right"></a>

		<script>
				
			$(".scrollable").scrollable();
 
			$(".items img").click(function() 
			{
 
				if ($(this).hasClass("active")) { return; }
 
				var url = $(this).attr("src").replace("_t", "");
 
				var wrap = $("#image_wrap").fadeTo("medium", 0.5);
 
				var img = new Image();
 
				img.onload = function() 
				{
					wrap.fadeTo("fast", 1);
 
					wrap.find("img").attr("src", url);
				};
 
				img.src = url;
 
				$(".items img").removeClass("active");
				$(this).addClass("active");
 
			}).filter(":first").click();
				
		</script>
			
		</div>
			
		<div class="mp_player">
				
		</div>
	</div>
        
		<div class="reference">
			<a href="">By Juan Alejandro Fausd</a>
		</div>

    </body>
</html>